<template>
  <div class="chatgpt-page">
    <!-- 左侧侧边栏区域 -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <h2>ChatTGP</h2>
      </div>
      <div class="sidebar-menu">
        <ul>
          <li>新对话</li>
          <li>历史记录</li>
          <li>设置</li>
        </ul>
      </div>
    </aside>

    <!-- 主体区域 -->
    <main class="main-area">
      <!-- 顶部栏 -->
      <header class="main-header">
        <div class="header-title">ChatTGP 模拟问答</div>
      </header>

      <!-- 聊天内容区域 -->
      <div class="chat-content" ref="chatContent">
        <div
            v-for="(message, index) in messages"
            :key="index"
            class="chat-message"
            :class="message.role === 'user' ? 'user-message' : 'ai-message'"
        >
          <div class="avatar">{{ message.role === 'user' ? 'U' : 'AI' }}</div>
          <div class="message-text">{{ message.content }}</div>
        </div>
      </div>

      <!-- 输入区域 -->
      <footer class="chat-footer">
        <textarea
            v-model="inputText"
            class="input-box"
            placeholder="请输入您的问题..."
            @keyup.enter="sendMessage"
        ></textarea>
        <button class="send-button" @click="sendMessage">发送</button>
      </footer>
    </main>
  </div>
</template>


<script>
import axios from "axios";

export default {
  name: "ChatGPTLike",
  data() {
    return {
      inputText: "", // 输入框内容
      messages: [
        { role: "ai", content: "你好！有什么我可以帮助您的吗？" }, // 初始AI消息
      ],
    };
  },
  methods: {
    async sendMessage() {
      const question = this.inputText.trim();
      if (!question) return;

      // 添加用户消息到聊天列表
      this.messages.push({ role: "user", content: question });
      this.inputText = ""; // 清空输入框
      this.scrollToBottom();

      try {
        // 发送请求到 Flask 接口
        const response = await axios.post("http://127.0.0.1:5000/chat", {
          question: question,
        });

        // 添加AI回复到聊天列表
        const answer = response.data.answer || "抱歉，我无法回答您的问题。";
        this.messages.push({ role: "ai", content: answer });
      } catch (error) {
        console.error("Error:", error);
        this.messages.push({
          role: "ai",
          content: "请求失败，请稍后重试。",
        });
      }

      this.scrollToBottom();
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const chatContent = this.$refs.chatContent;
        chatContent.scrollTop = chatContent.scrollHeight;
      });
    },
  },
};
</script>


<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.chatgpt-page {
  display: flex;
  height: 80vh;
  background-color: #343541; /* 整体深色背景，仿照ChatGPT */
  color: #d1d5db;
}

/* 左侧侧边栏 */
.sidebar {
  width: 260px;
  background-color: #202123;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #444654;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #444654;
}

.sidebar-header h2 {
  font-size: 18px;
  color: #fff;
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
}

.sidebar-menu ul {
  list-style: none;
}

.sidebar-menu li {
  padding: 15px 20px;
  cursor: pointer;
  color: #d1d5db;
  font-size: 14px;
}

.sidebar-menu li:hover {
  background-color: #3f4146;
}

/* 主体区域 */
.main-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #343541;
}

/* 顶部栏 */
.main-header {
  height: 60px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #444654;
  padding: 0 20px;
}

.header-title {
  font-size: 16px;
  color: #fff;
}

/* 聊天内容区域 */
.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.chat-message .avatar {
  width: 40px;
  height: 40px;
  background-color: #565869;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin-right: 10px;
}

.user-message .avatar {
  background-color: #26a69a;
}

.ai-message .avatar {
  background-color: #10a37f;
}

.message-text {
  background-color: #444654;
  padding: 15px;
  border-radius: 8px;
  max-width: 60%;
  line-height: 1.4;
  color: #d1d5db;
  font-size: 14px;
}

/* 输入区域 */
.chat-footer {
  display: flex;
  align-items: center;
  border-top: 1px solid #444654;
  padding: 10px 20px;
  background-color: #343541;
}

.input-box {
  flex: 1;
  resize: none;
  background-color: #40414f;
  border: none;
  border-radius: 8px;
  padding: 10px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
}

.send-button {
  background-color: #10a37f;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  color: #fff;
  margin-left: 10px;
  cursor: pointer;
  font-size: 14px;
}

.send-button:hover {
  background-color: #22c08c;
}
</style>
